<template>
  <div>
    <template v-if="detailsItem.assessmentStatus != 1 && detailsItem.signDetails.length != 0">
      <div class="desc">
        <div class="big_title">民主测评签到表（{{ detailsItem.assessmentSecondTitle }}）</div>
        <!-- <div class="little_title">2021年第3季度非领导成员</div> -->
        <div class="info">
          {{ detailsItem.startTime }} ~ {{ detailsItem.endTime }} 召开民主测评会，应到{{
            detailsItem.sumPerson
          }}人，实到{{ detailsItem.actuallyPerson }}人。
        </div>
      </div>
      <div class="table">
        <table v-if="detailsItem.signDetails.length > 0">
          <thead>
            <tr>
              <th class="serial">序号</th>
              <th class="name">姓名</th>
              <th class="phone">手机号</th>
              <th class="time">签到时间</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in detailsItem.signDetails" :key="item.id">
              <td class="serial">{{ index + 1 }}</td>
              <td class="name">{{ item.userName }}</td>
              <td class="phone">{{ item.telephone }}</td>
              <td class="time">{{ item.signTime }}</td>
            </tr>
          </tbody>
        </table>
        <van-empty description="暂无签到" v-else />
      </div>
    </template>
    <van-empty description="暂无数据" v-else />
  </div>
</template>

<script>
import { listAssessmentSignFormVO, listAssessmentSignFormVOOrgan } from '@api/api-democratic.js'

export default {
  name: 'signTable',
  components: {},
  props: { searchParams: Object },
  data() {
    return {
      id: this.$route.query.id,
      detailsItem: {
        signDetails: [],
      },
    }
  },
  computed: {},
  watch: {
    searchParams: {
      handler(newVal, oldVal) {
        if (!this.id) {
          this.initdata1()
        }
      },
      immediate: true,
      deep: true,
    },
  },
  created() {},
  mounted() {
    if (!this.id) {
      this.initdata1()
    } else {
      this.initdata()
    }
  },
  methods: {
    initdata() {
      listAssessmentSignFormVO({
        assessmentId: this.id,
      })
        .then(res => {
          const data = res.data
          data.signDetails = data.signDetails ? data.signDetails : []
          this.detailsItem = data
        })
        .catch(err => {})
    },
    /* 初始化数据 */
    initdata1() {
      listAssessmentSignFormVOOrgan({
        orgId: this.searchParams.id,
        title: this.searchParams.title,
        tenantId: this.searchParams.tenantId,
      }).then(res => {
        let data = res.data
        data.signDetails = data.signDetails ? data.signDetails : []
        this.detailsItem = { ...data }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.desc {
  text-align: center;
  // font-size: 14px;
  margin-top: 15px;
  .big_title {
    font-size: 16px;
    font-weight: bold;
  }
  .little_title {
    font-weight: bold;
    margin-top: 6px;
  }
  .info {
    margin-top: 10px;
    color: #666;
  }
}
.table {
  margin-top: 15px;
  margin-bottom: 10px;
  // font-size: 14px;
  table {
    width: 100%;
    border-right: 1px solid #eeeeee;
    border-top: 1px solid #eeeeee;
    thead {
      background-color: #f2f2f2;
    }
    tbody {
      text-align: center;
    }
    th,
    td {
      text-align: center;
      // word-break: keep-all; /* for ie */
      // white-space: nowrap; /* for chrome */
      padding: 8px 3px;
      border-left: 1px solid #eeeeee;
      border-bottom: 1px solid #eeeeee;
      font-size: 13px;
    }
    // .serial,
    // .name {
    //   width: 15%;
    //   min-width: 15%;
    // }
    // .phone {
    //   width: 28%;
    //   min-width: 28%;
    // }
    // .time {
    //   width: 42%;
    //   min-width: 42%;
    // }
  }
}
</style>
